今天我們開始進入正題,話不多說開始吧~
打開 Visual Studio ,點選「建立新的專案」
搜尋 ASP .NET Web 應用程式 (.NET Framwork) 專案,點選並按「下一步」
※注意不要點選成「ASP .NET Core Web 應用程式」或其他名稱很像的專案
設定專案名稱為「MyFirstWebApp」(或你自己喜歡的名稱),其他選項照預設即可,按下「建立」
接著選擇「MVC」範本,其他選項不變,按下「建立」後即會生成新專案
直接點選「偵錯」鍵(畫面中「IIS EXpress」按鈕)或按鍵盤的F5鍵,進行建置與開啟網頁
網頁開啟後會發現專案已經有建立一個首頁的預設頁面,到此可以算是完成第一個網頁程式囉!
直接在瀏覽器頁面關閉網頁視窗,或是在IDE按下「停止偵錯」按鈕,就可以結束偵錯了
第一個網頁建立成功後,我們來對顯示內容稍微動點手腳吧~
在「方案總管」下會看到已建立的專案資料夾,找到「Views」→「Home」資料夾,底下有個「Index.cshtml」檔案,點擊2下開啟
開啟後在程式碼任一處按下滑鼠右鍵,點選「在瀏覽器中檢視」,此時會發現一樣會顯示剛開始建立的首頁,接著我們可以來稍微對照一下畫面和程式碼內容
觀察首頁畫面大致可以分成三個部分:
所以接著我們嘗試修改看看內容:
(1) 修改第一個<div>
區塊下的<h1>
標題內容
(2) 修改最上面 @{ }
符號包圍區塊的文字
※也可以自行嘗試修改其他段落內容、超連結網址等等,就不再多做示範了
@{
ViewBag.Title = "Coding小僧的首頁";
}
<div class="jumbotron">
<h1>Coding小僧的第一個ASP.NET MVC程式</h1>
<p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
<p><a href="https://asp.net" class="btn btn-primary btn-lg">Learn more »</a></p>
</div>
@{ }
符號 和 ViewBag.Title
是什麼我們暫時先不用知道,總之修改完成後記得先按下Ctrl+s進行存檔,接著直接在瀏覽器中的首頁畫面按下重新整理,這時應該就可以發現畫面內容已經更新囉~
同時我們發現 ViewBag.Title
修改的內容,其實就是顯示在視窗左上方的標題。
再來探討一下首頁畫面的其他部分,我們可以先試著點選上方導覽列的「首頁」、「關於」、「連絡人」連結,會發現除了中間的內容會變化以外,上方的導覽列與最下方一行的小文字是一直存在的。
這是因為專案已經有預設套用的版面配置頁(Layout),我們在專案Views下可以找到一個名為「ViewStart.cshtml」,裡面會預設指定專案的檢視頁面套用"~/Views/Shared/Layout.cshtml",於是我們再到Views → Shared底下找到Layout.cshtml檔案,便可以發現原來導覽列與最下方文字內容是寫在這裡面了。
那麼一樣的道理,在裡面動些手腳也是輕而易舉的事:
<head>
標籤下的<title>
標籤裡修改文字內容,同時可以發現完整的視窗標題(含ViewBag.Title
)其實是在這裡<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - 歡迎光臨^_^</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<div>
標籤內的<footer>
標籤 → <p>
標籤內修改文字內容 <div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - Coding小僧的 ASP.NET MVC 應用程式</p>
</footer>
</div>
在上方這段Code可以看到有個 @RenderBody()
的東西,實際上它就等於任何有套用這份Layout的View檢視頁面,也就是說View會放入此處與Layout進行合併,就成了我們看到的網頁畫面啦~
今天建立了第一個Web Application,也對預設建立的範本網頁有初步的認識了,明天來說說Controller(控制器)到底是什麼東西,以及Controller和View的搭配。那麼就明天見啦!
※小弟不才,在軟體的世界還只是個小菜雞,如果內容有任何謬誤或問題,還請各位大神前輩們多多批評指教~歡迎下方留言討論^^